/**
 * 功能描述: 基础下拉菜单样式表
 * @author 崔孝楠
 * @date 2022/9/23 11:24
 * @version 1.0
 */
@import '../../style/index';

// 下拉菜单隐藏
@mixin dropdown-menu-hidden--layout {
  display: none;
}

// 下拉菜单显示
@mixin dropdown-menu-show--layout {
  display: block;
}

// 下拉布局
@mixin dropdown--layout {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $line-height-base;
  display: block;
}

// link 布局
@mixin dropdown-link-a--layout {
  padding-right: 5px;
}

// 下拉菜单布局
@mixin dropdown-menu--layout {
  position: relative;
  margin: 0;
  padding: 4px 0;
  text-align: left;
  @include dropdown-menu-hidden--layout;
}

// 下拉样式
@include b(dropdown) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  @include dropdown--layout;
}

// hover显示下拉菜单
.#{$namespace}-dropdown-trigger:hover + .#{$namespace}-dropdown-menu,
.#{$namespace}-dropdown-menu:hover {
  @include dropdown-menu-show--layout;
}

// link 触发
@include b(dropdown-link) {
  a {
    color: $color-primary;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s ease;
    @include dropdown-link-a--layout;
  }
  // 图标
  svg {
    font-size: 10px;
    color: $color-primary;
  }

}

// 下拉菜单样式
@include b(dropdown-menu) {
  list-style-type: none;
  background-color: $color-white;
  background-clip: padding-box;
  border-radius: 2px;
  outline: none;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  @include dropdown-menu--layout;
}
// 下拉菜单隐藏
@include b(dropdown-menu-hidden) {
  @include dropdown-menu-hidden--layout;
}
